<template>
  <div class="table-page">
    <a-space>
      <a-button type="primary" @click="handleCreate()">
        <template #icon>
          <icon-plus />
        </template>
        <template #default>添加部门</template>
      </a-button>
    </a-space>
    <section class="table-box">
      <a-table
        row-key="id"
        size="small"
        page-position="bl"
        :bordered="{ cell: true }"
        :loading="loading"
        :data="tableData"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="{ showPageSize: true, showTotal: true, total: total, current: current, pageSize: pageSize }"
        @page-change="changeCurrent"
        @page-size-change="changePageSize"
      >
        <template #columns>
          <a-table-column title="ID" :width="80" data-index="id"></a-table-column>
          <a-table-column title="部门名称" data-index="name"></a-table-column>
          <a-table-column title="部门创建时间" data-index="create_time"></a-table-column>
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-space :size="4">
                <a-link status="warning" @click="handleEdit(record)">
                  <template #default>编辑</template>
                </a-link>
                <a-popconfirm @ok="handleDelete(record)" type="warning" content="您确定要删除吗?">
                  <a-link status="danger">
                    <template #default>删除</template>
                  </a-link>
                </a-popconfirm>
                <a-popconfirm
                  @ok="handleResetAuthority(record)"
                  type="warning"
                  content="将通过部门预设权限覆盖该部门内管理员权限，确定执行吗?"
                >
                  <a-link>
                    <template #default>覆盖权限</template>
                  </a-link>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </section>

    <EditModal :departMentOptions="departMentOptions" @reFreshTable="getTableData" ref="EditModalRef"></EditModal>
    <addDepartMentModal
      :departMentOptions="departMentOptions"
      @reFreshTable="getTableData"
      ref="addModalRef"
    ></addDepartMentModal>
  </div>
</template>

<script setup lang="ts" name="MainTable">
import { reactive, ref } from 'vue'
import { usePagination } from '@/hooks'
import { getAdminRoleList, getAdminList, updateAdminStatusList, updateAdminRoleList } from '@/apis'
import { useRouter } from 'vue-router'
import EditModal from './components/EditModal.vue'
import addDepartMentModal from './components/addDepartMentModal.vue'
import { Message } from '@arco-design/web-vue'
import { format, add, startOfWeek, subDays } from 'date-fns'

const router = useRouter()
const form = reactive({
  admin_role_id: '',
  username: ''
})

const loading = ref(false)
const tableData = ref([])

const { current, pageSize, total, changeCurrent, changePageSize, setTotal } = usePagination(() => getTableData())

const handleDelete = async (item) => {
  const res = await updateAdminRoleList({ admin_role_id: item.id }, 'delete')
  const resData = JSON.parse(res)
  if (resData.code === 200) {
    Message.success(resData.message)
    getTableData()
  } else {
    Message.error(resData.message)
  }
}
const handleResetAuthority = async (item) => {
  const res = await updateAdminRoleList({ admin_role_id: item.id }, 'authority')
  const resData = JSON.parse(res)
  if (resData.code === 200) {
    Message.success(resData.message)
    getTableData()
  } else {
    Message.error(resData.message)
  }
}
const getTableData = async () => {
  loading.value = true
  const res = await getAdminRoleList({
    page: current.value,
    limit: pageSize.value,
    ...form
  })
  let resData = JSON.parse(res)

  if (resData.code === 200) {
    tableData.value = resData.result.data
    setTotal(resData.result.total)
    loading.value = false
  } else {
    loading.value = false
  }
}
const handleReset = () => {
  form.admin_role_id = ''
  form.username = ''
  getTableData()
}
const EditModalRef = ref<InstanceType<typeof EditModal>>()

const handleEdit = (item) => {
  addModalRef.value?.edit(item.id)
}
const balanceModalRef = ref()
const handleBalance = (item) => {
  balanceModalRef.value?.edit(item.id)
}

const onDetail = (item) => {
  router.push({
    path: '/customer-list/detail',
    query: { id: item.id, name: item.nickname, mobile: item.mobile, headimage: item.headimage }
  })
}

let departMentOptions = ref([])

// 打开添加弹框
const addModalRef = ref<InstanceType<typeof addModal>>()
const handleCreate = () => {
  addModalRef.value?.create()
}

getTableData()
</script>

<style lang="scss" scoped>
:deep(.arco-grid) {
  flex-wrap: wrap;
}
:deep(.arco-grid-item) {
  min-width: 250px;
}
:deep(.arco-alert-success) {
  padding: 14px 16px;
  border-color: rgb(var(--success-6));
  background-color: rgba(var(--success-6), 0.08);
  .arco-alert-content {
    color: rgb(var(--success-6));
    font-size: 12px;
  }
}
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  padding-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    margin-top: 12px;
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
  .table-box {
    flex: 1;
    overflow: hidden;
    margin-top: 12px;
    padding-bottom: 16px;
  }
}
</style>
